import { login, getUserInfo, getUserDetailById } from '@/api/user'
// 把获取封装的cookie 的方法 导入
import { setToken, getToken, removeToken } from '@/utils/auth'
export default {
  namespaced: true,
  // 箭头函数？
  // data(){return {响应式数据}}  复用的时候 如果直接写成对象 由于引用数据类型的特性
  // 各个组件之间共享data之间的数据  每一个发生改变的时候会影响其他的
  // 改成函数return对象之后  每一次组件的复用的时候  函数都重新执行
  // 每次返回的都是一个全新的对象  也就是每一个复用的组件 都拥有自己独立的数据

  // vuex中也是可能进行复用的  为了复用的时候数据都是单独的数据  也要写成函数
  state: () => ({
    // token
    // 先从本地取 本地没有再取空串
    token: getToken() || '',
    // 用户信息
    userInfo: {}
  }),
  mutations: {
    // 这是我们再vuex中定义的方法
    // 设置token
    setToken(state, value) {
      // 存在vuex
      state.token = value
      // 存入本地
      // 这个是cookie里面定义的方法
      setToken(value)
    },
    // 设置用户信息
    setUserInfo(state, value) {
      state.userInfo = value
    },
    // 清除用户信息
    removeUserInfo(state) {
      state.token = ''
      state.userInfo = {}
      removeToken()
    }
  },
  actions: {
    // 设置token
    asyncSetToken(store, data) {
      // 在promise链中，如果在前一个.then方法中return了new promise对象
      // 那么后一个.then的回调 会等到new promise回调执行完之后才执行
      return new Promise((resovle, reject) => {
        login(data).then(res => {
          // 提交mutation函数，存到vueX
          store.commit('setToken', res.data)
          console.log(res)
          // 成功后，返回resolve
          resovle(res)
        })
      })
    },
    // 异步获取用户信息
    asyncGetUserInfo(store) {
      // 1.调用获取个人信息接口
      return new Promise((resolve, reject) => {
        getUserInfo().then(res => {
          console.log(res)
          getUserDetailById(res.data.userId).then(imgRes => {
            store.commit('setUserInfo', { ...res.data, ...imgRes.data })
            resolve(res)
          })
        })
      })

      // 依赖获取用户信息获取到的user Id 然后发送获取图片的请求

      // 2.拿到数据后通过调用mutation函数 把信息存入到state中
    }
  }
}
